<template>
  <div class="home">
    <!-- <video id="video" autoplay width="600" height="400"></video> -->
    <!--    <div class="nav">-->
    <!--      <div class="gradient-text-one">元宝山露天煤矿连续工艺集控平台</div>-->
    <!--      <div class="title">实时监控</div>-->
    <!--      <div></div>-->
    <!--    </div>-->
    <div class="wrapper">
      <div class="left">
        <div class="title">实时监控</div>
        <div class="tree">
          <el-tree :data="data" :highlight-current="true" :props="defaultProps" @node-click="handleNodeClick">
            <template slot-scope="{ node, data }" class="custom-tree-node">
              <span style="display: flex; align-items: center; height: 40px">
                <span>
                  <!-- <img v-if="!data.children && node.level !== 1" src="" alt="" /> //没有子级的图标，我这里没有子级不设置图标 -->
                  <img v-if="node.level != 1" alt="" src="../../assets/jiankong.png" />
                </span>
                <span class="label" style="margin-left: 5px">{{ node.label }}</span>
              </span>
            </template>
          </el-tree>
        </div>
      </div>
      <div class="right">
        <div class="video">
          <div id="videoBox" class="video-box">
            <div id="divPlugin2" class="plugin" :style="{ width: width + 'px', height: height + 'px' }"></div>
            <!--            <div-->
            <!--              class="box-item"-->
            <!--              :style="{-->
            <!--                width: videoList.length == 1 ? '100%' : videoList.length == 4 ? '49.9%' : '33.3%',-->
            <!--                height: videoList.length == 1 ? '100%' : videoList.length == 4 ? '49.9%' : '33.3%',-->
            <!--              }"-->
            <!--              v-for="(item, index) in videoList"-->
            <!--              :key="index"-->
            <!--            >-->
            <!--              <iframe style="height: 100%; width: 100%" id="iframeVideo" :src="item.url" frameborder="0" allowfullscreen></iframe>-->
            <!--            </div>-->
          </div>
        </div>
        <div class="video-bottom">
          <img alt="" src="../../assets/View1.png" @click="changeWndNum(1)" />
          <img alt="" src="../../assets/View4.png" @click="changeWndNum(2)" />
          <img alt="" src="../../assets/View9.png" @click="changeWndNum(3)" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  import axios from 'axios';

  export default {
    name: 'HomeView',
    data() {
      return {
        show: true,
        currentIndex: -1,
        videoList: [
          { index: 0, url: '' },
          { index: 1, url: '' },
          { index: 2, url: '' },
          { index: 3, url: '' },
        ],
        url: '',
        width: 0,
        height: 0,
        data: [
          {
            label: '华鑫',
            isChildren: false,
            children: [
              {
                label: '153',
                isChildren: false,
                children: [
                  {isChildren: true, user: 'admin',label: '153机头楼梯', password: 'hx123456', channel: '1', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '153机头空地', password: 'hx123456', channel: '2', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '153机头沿线', password: 'hx123456', channel: '3', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '153机头空地', password: 'hx123456', channel: '6', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '153机头楼梯口', password: 'hx123456', channel: '7', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '153张紧控制箱', password: 'hx123456', channel: '10', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '153机尾沿线(', password: 'hx123456', channel: '11', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '153机尾', password: 'hx123456', channel: '12', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '153机尾沿线2', password: 'hx123456', channel: '13', url:'10.13.155.17'},
                ],
              },
              {
                label: '154',
                isChildren: false,
                children: [
                  {isChildren: true, user: 'admin',label: '154高压室门口', password: 'hx123456', channel: '2', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '154张紧控制箱', password: 'hx123456', channel: '7', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '154机头皮带', password: 'hx123456', channel: '8', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '154机头皮带2', password: 'hx123456', channel: '9', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '154楼梯口1', password: 'hx123456', channel: '10', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '154机头皮带', password: 'hx123456', channel: '13', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '154视频控制箱', password: 'hx123456', channel: '15', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '154机尾沿线', password: 'hx123456', channel: '5', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '154机尾滚筒', password: 'hx123456', channel: '8', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '154机尾沿线', password: 'hx123456', channel: '9', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '154二层三层过道', password: 'hx123456', channel: '16', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '154沿线楼梯', password: 'hx123456', channel: '2', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '154机头皮带', password: 'hx123456', channel: '3', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '154-321小车限位', password: 'hx123456', channel: '27', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '154-311小车限位', password: 'hx123456', channel: '28', url:'10.13.155.15'},
                ],
              },
              {
                label: '311',
                isChildren: false,
                children: [
                  {isChildren: true, user: 'admin',label: '311皮带控制箔', password: 'hx123456', channel: '4', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '311皮带沿线机头', password: 'hx123456', channel: '5', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '311张紧滚筒', password: 'hx123456', channel: '10', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '311梯子口', password: 'hx123456', channel: '11', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '311机头张紧控制箱', password: 'hx123456', channel: '15', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '311、321过道', password: 'hx123456', channel: '14', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '311机尾', password: 'hx123456', channel: '12', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '311楼梯口', password: 'hx123456', channel: '8', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '311-层滚筒', password: 'hx123456', channel: '18', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '311视频控制箱(', password: 'hx123456', channel: '19', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '311-层滚筒', password: 'hx123456', channel: '18', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '311视频控制箱(', password: 'hx123456', channel: '19', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '311张紧控制箱', password: 'hx123456', channel: '2', url:'10.13.155.20'},
                  {isChildren: true, user: 'admin',label: '311、312沿线', password: 'hx123456', channel: '14', url:'10.13.155.16'},
                ],
              },
              {
                label: '312',
                isChildren: false,
                children: [
                  {isChildren: true, user: 'admin',label: '312机头沿线', password: 'hx123456', channel: '17', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '312桥下减速机', password: 'hx123456', channel: '18', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '312减速机', password: 'hx123456', channel: '19', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '312机头', password: 'hx123456', channel: '20', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '312张紧控制箱', password: 'hx123456', channel: '24', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '312机头皮带检测', password: 'hx123456', channel: '25', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '312桥下过道', password: 'hx123456', channel: '26', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '312减速机热成像', password: 'hx123456', channel: '29', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '312、322机尾过道', password: 'hx123456', channel: '9', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '312机尾防雨置', password: 'hx123456', channel: '14', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '312、322机尾过道', password: 'hx123456', channel: '9', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '312箱变', password: 'hx123456', channel: '1', url:'10.13.155.20'},
                ],
              },
              {
                label: '164',
                isChildren: false,
                children: [
                  {isChildren: true, user: 'admin',label: '164二层过道梯子', password: 'hx123456', channel: '17', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '164楼梯口1', password: 'hx123456', channel: '18', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '164机头沿线', password: 'hx123456', channel: '19', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '164机头箱变侧门', password: 'hx123456', channel: '20', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '164楼梯', password: 'hx123456', channel: '21', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '164s电机减速机', password: 'hx123456', channel: '22', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '164-321小车限位', password: 'hx123456', channel: '23', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '164-311小车限位', password: 'hx123456', channel: '24', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '164机头张紧装置', password: 'hx123456', channel: '25', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '164机头箱变低压室', password: 'hx123456', channel: '26', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '164机尾沿线1', password: 'hx123456', channel: '27', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '164机尾沿线2', password: 'hx123456', channel: '28', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '164机尾滚筒', password: 'hx123456', channel: '29', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '164机尾箱交', password: 'hx123456', channel: '30', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '154减速机热成像', password: 'hx123456', channel: '31', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '164机头电机', password: 'hx123456', channel: '3', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '164二层滚筒', password: 'hx123456', channel: '4', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '164张紧滚筒', password: 'hx123456', channel: '5', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '164二层过道', password: 'hx123456', channel: '6', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '164机头沿线', password: 'hx123456', channel: '11', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '164机头楼梯口', password: 'hx123456', channel: '16', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '164二层楼梯', password: 'hx123456', channel: '17', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '164一层减速机', password: 'hx123456', channel: '19', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '164视频控制箱', password: 'hx123456', channel: '20', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '164机头二层', password: 'hx123456', channel: '21', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '164机头电机热成像', password: 'hx123456', channel: '22', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '164桥下沿线', password: 'hx123456', channel: '4', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '164小车控制箱', password: 'hx123456', channel: '14', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '164三层楼梯口', password: 'hx123456', channel: '1', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '164机头减速机1热成像', password: 'hx123456', channel: '31', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '164沿线', password: 'hx123456', channel: '26', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '164机头楼梯', password: 'hx123456', channel: '13', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '164沿线', password: 'hx123456', channel: '26', url:'10.13.155.17'},
                ],
              },
              {
                label: '313、314',
                isChildren: false,
                children: [
                  {isChildren: true, user: 'admin',label: '313机头沿线', password: 'hx123456', channel: '3', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '313机头过道', password: 'hx123456', channel: '6', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '313、323中间过道', password: 'hx123456', channel: '7', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '313机头沿线', password: 'hx123456', channel: '8', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '313机楼梯口', password: 'hx123456', channel: '11', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '313张紧滚筒', password: 'hx123456', channel: '12', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '313机尾沿线', password: 'hx123456', channel: '16', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '314机尾沿线', password: 'hx123456', channel: '4', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '314机尾滚筒', password: 'hx123456', channel: '5', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '314机尾', password: 'hx123456', channel: '10', url:'10.13.155.16'},
                ],
              },
              {
                label: '321、322',
                isChildren: false,
                children: [
                  {isChildren: true, user: 'admin',label: '321机头沿线', password: 'hx123456', channel: '16', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '321楼梯口2', password: 'hx123456', channel: '17', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '321张紧控制箱', password: 'hx123456', channel: '20', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '321楼梯口', password: 'hx123456', channel: '21', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '322箱变', password: 'hx123456', channel: '22', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '322机头滚筒', password: 'hx123456', channel: '23', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '322机头', password: 'hx123456', channel: '24', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '322机头桥下', password: 'hx123456', channel: '25', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '321张紧滚筒', password: 'hx123456', channel: '27', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '322除尘装置', password: 'hx123456', channel: '28', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '321皮带沿线1', password: 'hx123456', channel: '1', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '321机尾', password: 'hx123456', channel: '18', url:'10.13.155.14'},
                  {isChildren: true, user: 'admin',label: '321沿线', password: 'hx123456', channel: '15', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '321机头沿线', password: 'hx123456', channel: '16', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '321楼梯口2', password: 'hx123456', channel: '17', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '321张紧控制箱', password: 'hx123456', channel: '20', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '321楼梯口', password: 'hx123456', channel: '21', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '322箱变', password: 'hx123456', channel: '22', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '322机头滚筒', password: 'hx123456', channel: '23', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '322机头', password: 'hx123456', channel: '24', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '322机头桥下', password: 'hx123456', channel: '25', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '321张紧滚筒', password: 'hx123456', channel: '27', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '322除尘装置', password: 'hx123456', channel: '28', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '322桥下滚筒', password: 'hx123456', channel: '21', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '322张紧控制箱', password: 'hx123456', channel: '22', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '322机尾滚筒', password: 'hx123456', channel: '7', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '322皮带机尾', password: 'hx123456', channel: '12', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '322减速机热成像', password: 'hx123456', channel: '30', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '321视频控制箱', password: 'hx123456', channel: '13', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '312机尾', password: 'hx123456', channel: '15', url:'10.13.155.17'},
                  {isChildren: true, user: 'admin',label: '321皮带滚筒1', password: 'hx123456', channel: '6', url:'10.13.155.15'},
                  {isChildren: true, user: 'admin',label: '322速机', password: 'hx123456', channel: '1', url:'10.13.155.16'},
                  {isChildren: true, user: 'admin',label: '322减速机热成像', password: 'hx123456', channel: '3', url:'10.13.155.20'},
                ],
              },
              {
                label: '沿线立杆',
                isChildren: false,
                children: [
                  {isChildren: true, user: 'admin',label: '153沿线(立杆2)', password: 'hx123456', channel: '1', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '154沿线立杆2', password: 'hx123456', channel: '4', url:'10.13.155.20'},
                  {isChildren: true, user: 'admin',label: '311立杆3', password: 'hx123456', channel: '2', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '311立杆1', password: 'hx123456', channel: '3', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '323立杆1', password: 'hx123456', channel: '4', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '312箱变(312立杆1)', password: 'hx123456', channel: '5', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '154沿线(立杆13)', password: 'hx123456', channel: '6', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '311沿线(立杆14)', password: 'hx123456', channel: '7', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '164立杆1', password: 'hx123456', channel: '8', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '164立杆4(153箱变)', password: 'hx123456', channel: '9', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '153箱变热成像', password: 'hx123456', channel: '10', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '164立杆2', password: 'hx123456', channel: '11', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '164立杆3', password: 'hx123456', channel: '12', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '164立杆5', password: 'hx123456', channel: '13', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '164立杆6', password: 'hx123456', channel: '14', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '164立杆7', password: 'hx123456', channel: '15', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '164立杆7', password: 'hx123456', channel: '16', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '164立杆8', password: 'hx123456', channel: '17', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '164立杆2', password: 'hx123456', channel: '18', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '321箱变热成像', password: 'hx123456', channel: '19', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '313立杆4', password: 'hx123456', channel: '20', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '313立杆5', password: 'hx123456', channel: '21', url:'10.13.155.18'},
                  {isChildren: true, user: 'admin',label: '323立杆2', password: 'hx123456', channel: '22', url:'10.13.155.18'},
                ],
              },
              // {
              //   label: '其它',
              //   isChildren: false,
              //   children: [
              //     {isChildren: true, user: 'admin',label: '323箱变', password: 'hx123456', channel: '5', url:'10.13.155.20'},
              //     {isChildren: true, user: 'admin',label: '323皮带机尾', password: 'hx123456', channel: '23', url:'10.13.155.15'},
              //     {isChildren: true, user: 'admin',label: '324机尾', password: 'hx123456', channel: '2', url:'10.13.155.16'},
              //   ],
              // },
            ],
          },
          {
            label: '恒宇',
            isChildren: false,
            children: [
              {
                label: '3号破碎站',
                isChildren: false,
                children: [
                  {
                    label: '3-1',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.80',
                  },
                  {
                    label: '3-2',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.81',
                  },
                  {
                    label: '3-3',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.82',
                  },
                  {
                    label: '3-4',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.83',
                  },
                  {
                    label: '3-5',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.84',
                  },
                  {
                    label: '3-6',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.85',
                  },
                  {
                    label: '3-7',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.86',
                  },
                  {
                    label: '3-8',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.87',
                  },
                  {
                    label: '3-9',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.88',
                  },
                  {
                    label: '3-10',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.89',
                  },
                  {
                    label: '3-11',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.90',
                  },
                  {
                    label: '3-12',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.91',
                  },
                  {
                    label: '3-13',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.92',
                  },
                ],
              },
              {
                label: '5号破碎站',
                isChildren: false,
                children: [
                  {
                    label: '3-1',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.94',
                  },
                  {
                    label: '3-2',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.95',
                  },
                  {
                    label: '3-3',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.96',
                  },
                  {
                    label: '3-4',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.97',
                  },
                  {
                    label: '3-5',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.98',
                  },
                  {
                    label: '3-6',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.99',
                  },
                  {
                    label: '3-7',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.100',
                  },
                  {
                    label: '3-8',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.101',
                  },
                  {
                    label: '3-9',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.102',
                  },
                  {
                    label: '3-10',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.103',
                  },
                  {
                    label: '3-11',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.104',
                  },
                  {
                    label: '3-12',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.105',
                  },
                  {
                    label: '3-13',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.106',
                  },
                  {
                    label: '3-14',
                    user: 'admin',
                    channel: '1',
                    isChildren: true,
                    password: 'zzhy1234',
                    url: '10.13.154.107',
                  },
                ],
              },
            ],
          },
        ],
        defaultProps: {
          children: 'children',
          label: 'label',
        },
        videoWin: 1,
        g_iWndIndex: 0,
        szDeviceIdentify: null,
        deviceport: '8000',
        channels: [],
        ip: '10.13.154.88',
        port: '80',
        username: 'admin',
        password: 'zzhy1234',
        iRtspPort: '554',
        videoData: {},
        isOne: true,
      };
    },
    beforeDestroy() {
      this.stopVideoPlay();
    },
    mounted() {
      let demo = document.querySelector('#videoBox');
      this.width = Math.floor(demo.getBoundingClientRect().width);
      this.height = demo.getBoundingClientRect().height;
      this.init();
    },
    methods: {
      clickLogout() {
        var self = this;
        if (null == self.szDeviceIdentify) {
          return;
        }
        WebVideoCtrl.I_Logout(self.szDeviceIdentify);
        console.log('退出登录')
      },
      clickStopRealPlay() {
        var self = this;
        for (let i = 0; i <= self.g_iWndIndex; i++) {
          var oWndInfo = WebVideoCtrl.I_GetWindowStatus(parseInt(i));
          if (oWndInfo != null) {
            WebVideoCtrl.I_Stop({
              iWndIndex: parseInt(i),
              success: function () {
                console.log('停止预览成功');
              },
              error: function () {
                console.log('停止预览失败');
              },
            });
          }
        }
      },
      stopVideoPlay() {
        this.clickStopRealPlay();
        this.clickLogout();
      },
      changeWndNum(iType) {
        this.videoWin = parseInt(iType, 10);
        WebVideoCtrl.I_ChangeWndNum(this.videoWin);
      },
      init() {
        WebVideoCtrl.I_InitPlugin(this.width, this.height, {
          bWndFull: true, // 但窗口双击全屏
          iPackageType: 2, // 封装格式 无插件只能是2
          iWndowType: this.videoWin, // 分屏类型 1*1 2*2 ....
          bNoPlugin: true, // 开启无插件模式
          cbInitPluginComplete: function () {
            console.log('初始化成功！');
            WebVideoCtrl.I_InsertOBJECTPlugin('divPlugin2');
          },
        });
      },
      clickLogin() {
        var self = this;
        if ('' == self.videoData.url || '' == self.videoData.password || '' == self.port) {
          return;
        }
        debugger;
        self.szDeviceIdentify = self.videoData.url + '_' + self.port;
        console.log(self.videoData.url, 1, self.port, self.videoData.user, self.videoData.password, '登录参数');
        WebVideoCtrl.I_Login(self.videoData.url, 1, self.port, self.videoData.user, self.videoData.password, {
          success: function (xmlDoc) {
            setTimeout(function () {
              console.log('登录成功', xmlDoc);
              self.clickStartRealPlay();
            }, 500);
          },
          error: function (status, xmlDoc) {
            console.log('登录失败', status, xmlDoc);
          },
        });
      },
      // 获取模拟媒体通道
      getChannelInfo() {
        let self = this;
        if (!this.szDeviceIdentify) {
          return;
        }
        WebVideoCtrl.I_GetAnalogChannelInfo(self.szDeviceIdentify, {
          async: false,
          success: (xmlDoc) => {
            let oChannels = $(xmlDoc).find('VideoInputChannel');
            console.log('获取模拟通道成功222', oChannels);
            $.each(oChannels, function (i) {
              let id = $(this).find('id').eq(0).text();
              let name = $(this).find('name').eq(0).text();
              if (!name) {
                name = 'Camera ' + (i < 9 ? '0' + (i + 1) : i + 1);
              }
              self.channels.push({
                id: id,
                name: name,
              });
            });
            console.log(self.channels);
          },
          error: function (status, xmlDoc) {
            console.log('获取模拟通道失败1111', status, xmlDoc);
          },
        });
      },
      // 获取端口
      getDevicePort() {
        if (!this.szDeviceIdentify) {
          return;
        }
        var oPort = WebVideoCtrl.I_GetDevicePort(this.szDeviceIdentify);
        console.log('获取通道端口号111', oPort);
        if (oPort != null) {
          this.deviceport = oPort.iDevicePort;
          this.iRtspPort = oPort.iRtspPort;
        }
      },
      // 开始预览
      clickStartRealPlay() {
        let self = this;
        let oWndInfo = WebVideoCtrl.I_GetWindowStatus(self.g_iWndIndex);
        // let iChannelID = self.channels[self.g_iWndIndex].id;
        if (!this.szDeviceIdentify) {
          return;
        }

        var startRealPlay = function () {
          console.log(self.szDeviceIdentify, self.deviceport, self.g_iWndIndex, '窗口下标', self.videoData.channel, '播放参数');
          WebVideoCtrl.I_StartRealPlay(self.szDeviceIdentify, {
            iWndIndex: self.g_iWndIndex,
            iRtspPort: parseInt(self.deviceport, 10), // RTSP端口必须是int
            iStreamType: 1, // 码流类型：1-主码流 必须int
            iChannelID: parseInt(self.videoData.channel, 10), // 播放通道 必须int
            bZeroChannel: false, // 是否播放零通道 默认false
            success: function () {
              console.log('预览成功');
              if (self.g_iWndIndex < self.videoWin * self.videoWin) {
                self.g_iWndIndex++;
              } else {
                self.g_iWndIndex = 0;
              }
            },
            error: function (status, xmlDoc) {
              console.log('预览失败', status, xmlDoc);
            },
          });
        };
        if (oWndInfo != null) {
          // 已经在播放了，先停止
          WebVideoCtrl.I_Stop({
            success: function () {
              startRealPlay();
            },
          });
        } else {
          startRealPlay();
        }
      },
      handleNodeClick(videoData) {
        if (videoData.isChildren) {
          if (this.videoData.url != videoData.url) {
            this.videoData = videoData;
            this.clickLogin(videoData);
          } else {
            this.videoData = videoData;
            this.clickStartRealPlay();
          }
        }
        // document.getElementById('myIframe1').src = "http://localhost:10087/vlc.html?mrl=rtsp://10.13.155.11:554/openUrl/rHEstFu";
        // if (data.isChildren) {
        //   axios.get('http://localhost:8888/api/v1/candidates/' + data.url).then((data) => {
        //     // alert(data.data);
        //     // console.log(data.data);
        //     // document.getElementById('myIframe1').src = "http://localhost:10087/vlc.html?mrl=" + data.data;
        //     if (this.currentIndex <= this.videoList.length - 1) {
        //       this.show = false;
        //       this.$nextTick(() => {
        //         this.videoList[this.currentIndex].url = 'http://localhost:10087/vlc.html?mrl=' + data.data;
        //         this.show = true;
        //       });
        //
        //       // document.getElementById('iframeVideo')[this.currentIndex].src = "http://localhost:10087/vlc.html?mrl=" + data.data.url;
        //       this.currentIndex++;
        //     } else {
        //       this.show = false;
        //       this.currentIndex = 0;
        //       this.$nextTick(() => {
        //         this.videoList[this.currentIndex].url = 'http://localhost:10087/vlc.html?mrl=' + data.data;
        //         this.show = true;
        //         this.currentIndex++;
        //       });
        //       // document.getElementById('iframeVideo')[this.currentIndex].src = "http://localhost:10087/vlc.html?mrl=" + data.data.url;
        //     }
        //   });
        // .then(data => (this.postId = data.id));
        // .then(response => console.log(response.json()))
        // request({
        //     url: 'http://127.0.0.1:8082/wx/user/getRtsp',
        //     method: 'post',
        //     params
        // }).then(response => {
        //     console.log(response.data)
        // })
        // var rtspUrl = "rtsp://10.13.155.11:554/openUrl/WuIIRiM";
        // var videoUrl = "http://localhost:10087/vlc.html?mrl=" + rtspUrl;
        // if (this.currentIndex <= this.videoList.length - 1) {
        //     this.videoList[this.currentIndex].url = videoUrl
        //     this.currentIndex++
        // } else {
        //     this.currentIndex = 0
        //     this.videoList[this.currentIndex].url = videoUrl
        //     this.currentIndex++
        // }
        // }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .nav {
    div {
      flex: 1;
    }

    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #02041b;

    .title {
      width: 400px;
      height: 50px;
      color: #46a6f8;
      background-image: url('../../assets/bt_2.png');
      background-size: 100% 100%;
      background-repeat: no-repeat;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 24px;
      font-weight: bold;
    }

    .gradient-text-one {
      display: flex;
      align-items: center;
      height: 50px;
      font-size: 25px;
      font-weight: bold;
      padding: 30px;
      background-image: -webkit-linear-gradient(bottom, #76b3ff, #76b3ff, #ffffff);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }
  }

  .wrapper {
    width: 100%;
    height: calc(100vh - 60px);
    display: flex;
    align-items: center;
    background-color: #050a32;

    .left {
      width: 20%;
      height: 100%;
      padding: 20px;

      .from {
        height: 30%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-around;
      }

      .tree {
        width: 100%;
        height: calc(100% - 140px);
        overflow: auto;
      }

      .title {
        color: #fff;
        height: 70px;
        display: flex;
        align-items: center;
        font-size: 18px;
        margin-top: 10px;
      }

      a {
        text-decoration: none;
      }

      .nav-item {
        height: 60px;
        display: flex;
        align-items: center;
        padding-left: 20%;
        color: #fff;
        background-color: #051751;
        margin-top: 2px;
      }
    }
  }

  .right {
    width: 80%;
    height: 100%;
    background-color: #050a32;

    .video-bottom {
      width: 100%;
      height: 50px;
      display: flex;
      justify-content: flex-end;
      align-items: center;

      img {
        margin-right: 10px;
      }
    }

    .video {
      width: 100%;
      height: calc(100% - 50px);
      display: flex;

      .video-box {
        width: 100%;
        height: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;

        .box-item {
          width: 49.9%;
          height: 50%;
          background-color: #262626;
          border: 1px solid #02041b;
        }
      }
    }
  }

  ::v-deep .el-tree {
    color: #fff;
    background-color: transparent;
  }

  ::v-deep.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content {
    background-color: #183056;
  }

  ::v-deep .el-tree-node__content:hover {
    background-color: #050a32;
  }

  ::v-deep .is-focusable:focus {
    background-color: #183056;
  }

  ::v-deep .el-input__inner {
    background-color: #000;
    color: #fff;
    border: 1px solid #3c62c0;
  }

  ::-webkit-scrollbar-track-piece {
    background: transparent;
  }

  ::-webkit-scrollbar {
    width: 6px;
  }

  ::-webkit-scrollbar-thumb {
    background: #4e4e4e;
    border-radius: 20px;
  }
</style>
